<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.25" charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="/css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
   <header th:fragment="header">
       <div id="Header">

           <div id="Logo">
               <div id="LogoContent">
                   <a href="/catalog/mainForm"><img src="http://localhost/images/logo-topbar.gif" /></a>
               </div>

           </div>

           <div id="Menu">
               <div id="MenuContent">

                   <a href="ShoppingCart"><img align="middle" name="img_cart" src="http://localhost/images/cart.gif" /></a>
                   <img align="middle" src="http://localhost/images/separator.gif" />

                   <a th:if="${session.loginAccount == null}">
                       <a href="SignonForm">Sign In</a>
                       <img align="middle" src="http://localhost/images/separator.gif"/>
                   </a>
                   <a th:if="${session.loginAccount!=null}">
                       <a href="signOut">Sign Out</a>
                       <img align="middle" src="http://localhost/images/separator.gif" />
                       <a href="accountForm">My Account</a>
                       <img align="middle" src="http://localhost/images/separator.gif" />
                   </a>

                   <a href="help">?</a>

               </div>
           </div>



           <div id="Search">
               <div id="SearchContent">
                   <form id="searchForm">
                       <input type="text"
                              name="keyword"
                              size="14"
                              id="keyword"
                              autocomplete="off"
                              placeholder="Search products...">
                       <input type="submit" value="Search">
                   </form>

                   <div id="productAutoComplete" style="display:none;">
                       <ul id="productAutoList"></ul>
                   </div>
               </div>
           </div>

           <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
           <script>
               $(function() {
                   let timeoutId;

                   // 输入事件（防抖300ms）
                   $('#keyword').on('input', function() {
                       clearTimeout(timeoutId);
                       const keyword = $(this).val().trim();

                       if (keyword.length < 1) {
                           $('#productAutoComplete').hide().empty();
                           return;
                       }

                       timeoutId = setTimeout(() => {
                           $.ajax({
                               type: 'GET',
                               url: '/catalog/view/search/suggest', // 确保路径与Controller匹配
                               data: { keyword: keyword },
                               success: function(data) {
                                   renderSuggestions(data);
                               },
                               error: function(xhr, status, error) {
                                   console.error('搜索失败:', error);
                                   $('#productAutoList').html('<li class="productAutoItem">服务暂不可用</li>');
                                   $('#productAutoComplete').show();
                               }
                           });
                       }, 300);
                   });




                   // 渲染建议列表
                   function renderSuggestions(items) {
                       const $list = $('#productAutoList').empty();
                       if (items.length === 0) {
                           $('#productAutoComplete').hide();
                           return;
                       }

                       items.forEach(item => {
                           $list.append(`
                <li class="productAutoItem"
                    data-product-id="${item.productId}">
                    ${item.productName} (ID: ${item.productId})
                </li>
            `);
                       });
                       $('#productAutoComplete').show();
                   }

                   // 点击建议项跳转（修正跳转路径）
                   $(document).on('click', '.productAutoItem', function() {
                       const productId = $(this).data('product-id');
                       $('#productAutoComplete').hide().empty();
                       $('#keyword').val('');
                       window.location.href = `/catalog/viewProduct?productId=${productId}`; // 与Controller路径一致
                   });
                   // function navigateToProduct(productId) {
                   //     window.location.href = `/catalog/viewProduct?productId=${encodeURIComponent(productId)}`;
                   // }
                   // 保留原有鼠标离开事件
                    $('#productAutoComplete').on('mouseleave', function() {
                        // $(this).hide();
                        $('#keyword').val('');
                   });
               });

           </script>





           <div id="QuickLinks">
               <a href="/catalog/viewCategory?categoryId=FISH"><img src="http://localhost/images/sm_fish.gif" /></a>
               <img src="http://localhost/images/separator.gif" />
               <a href="/catalog/viewCategory?categoryId=DOGS"><img src="http://localhost/images/sm_dogs.gif" /></a>
               <img src="http://localhost/images/separator.gif" />
               <a href="/catalog/viewCategory?categoryId=REPTILES"><img src="http://localhost/images/sm_reptiles.gif" /></a>
               <img src="http://localhost/images/separator.gif" />
               <a href="/catalog/viewCategory?categoryId=CATS"><img src="http://localhost/images/sm_cats.gif" /></a>
               <img src="http://localhost/images/separator.gif" />
               <a href="/catalog/viewCategory?categoryId=BIRDS"><img src="http://localhost/images/sm_birds.gif" /></a>
           </div>

       </div>
   </header>
</body>
</html>